<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <div v-if="isShowDel">
        <span @click="$emit('clear-history')">全部删除</span>
        <!-- <span @click="history.splice(0)">全部删除</span> -->
        <span @click="isShowDel = false" style="margin-left: 8px">完成</span>
      </div>
      <van-icon @click="isShowDel = true" v-else name="delete" />
    </van-cell>
    <van-cell
      v-for="(item, index) in history"
      @click="clickHistory(index, item)"
      :key="item"
      :title="item">
      <van-icon v-if="isShowDel" name="close" />
    </van-cell>
    <van-empty v-if="!history.length" image="error" description="暂无搜索历史" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShowDel: false
    }
  },

  props: {
    history: {
      type: Array,
      required: true
    }
  },

  created () {

  },

  methods: {
    clickHistory (index, searchValue) {
      if (this.isShowDel) {
        // 删除
        // 父组件传递给子组件的数据，如果是值类型，不能修改
        // 如果是复杂数据类型，也不能直接修改 this.history = []
        // 但是可以对history的内部数据进行修改
        this.history.splice(index, 1)
      } else {
        console.log('搜索')
        this.$emit('search', searchValue)
      }
    }
  }
}
</script>

<style scoped lang='less'>

</style>
